import { Canvas } from '@react-three/fiber';
import {CameraControls} from '@react-three/drei';
import Box from './Box.jsx'
import * as THREE from 'three';
import Polyhedron from './Polyhedron.jsx';
import { Stats } from '@react-three/drei';

function Effection() {

  const polyhedron = [
    new THREE.BoxGeometry(2, 2, 2),
    new THREE.SphereGeometry(1),
    new THREE.DodecahedronGeometry(1),
  ];

  return (
    <Canvas camera={{ position: [0, 0, 10], fov: 75 }} args={{color: 'black'}} >
      <CameraControls />
      <ambientLight intensity={0.5}/>
      <directionalLight color="red" position={[0, 0, 5]}/>
      <Box position={[-8, 0, 0]} name={'A'} wireframe={true} />
      <Box position={[8, 0, 0]} name={'B'} wireframe={false} />

      <Polyhedron position={[-2, -2, 0]} polyhedron={polyhedron} />
      <Polyhedron position={[2, -2, 0]} polyhedron={polyhedron} />
      <Polyhedron position={[-2, 2, 0]} polyhedron={polyhedron} />
      <Polyhedron position={[2, 2, 0]} polyhedron={polyhedron} />
      <axesHelper />

      <Stats />
    </Canvas>
  )
}

export default Effection;
